<template>
	<view class="container">
		<view class="content">
			<!-- 主轮播图 -->
			<view class="main-banner">
				<swiper class="banner-swiper"
					:circular="true"
					:autoplay="true"
					:interval="4000"
					:duration="500"
					@change="handleSwiperChange">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<view class="banner-content" :style="{ backgroundImage: `url(${item.image})` }">
							<view class="banner-info">
								<view class="tag" v-if="item.tag">{{ item.tag }}</view>
								<text class="title">{{ item.title }}</text>
								<text class="desc">{{ item.description }}</text>
								<button class="action-btn" @click="handleSwiperAction(item)">
									<text class="iconfont icon-magic"></text>
									{{ item.buttonText }}
								</button>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper-dots">
					<view v-for="(item, index) in swiperList" 
						:key="index" 
						:class="['dot', currentSwiper === index ? 'active' : '']">
					</view>
				</view>
			</view>

			<!-- 主要功能区 -->
			<view class="features">
				<view class="feature-main" @click="handleWholeHouseDesign">
					<view class="feature-content">
						<text class="tag">NEW</text>
						<text class="title">整屋设计</text>
						<text class="subtitle">一键生成3D设计图</text>
						<button class="feature-btn">
							<text class="iconfont icon-arrow"></text>
							去设计
						</button>
					</view>
					<view class="feature-image">
						<image src="/static/images/features/3d-house.jpg" mode="aspectFit" />
					</view>
				</view>

				<view class="feature-grid">
					<view class="feature-item" @click="handlePhotoDesign">
						<image class="icon" src="/static/images/features/camera.jpg" mode="aspectFit" />
						<text class="title">拍照设计</text>
						<text class="desc">房间风格随心换</text>
					</view>
					<view class="feature-item" @click="handleFurnitureExchange">
						<image class="icon" src="/static/images/features/furniture.jpg" mode="aspectFit" />
						<text class="title">软装换搭</text>
						<text class="desc">选家具看效果</text>
					</view>
					<view class="feature-item" @click="handleAIDecoration">
						<image class="icon" src="/static/images/features/art.jpg" mode="aspectFit" />
						<text class="title">AI装饰画</text>
						<text class="desc">获得专属成品画</text>
					</view>
				</view>
			</view>

			<!-- 风格模板区域 -->
			<view class="templates">
				<view class="section-header">
					<text class="icon iconfont icon-template"></text>
					<text class="title">风格模板</text>
				</view>
				<scroll-view class="room-types" scroll-x show-scrollbar="false">
					<view class="room-type" 
						v-for="room in roomTemplates" 
						:key="room.id"
						:class="{ active: activeRoom === room.id }"
						@click="setActiveRoom(room.id)">
						<image class="room-icon" :src="room.imageUrl" mode="aspectFit" />
						<text>{{ room.name }}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 设计案例展示 -->
			<view class="design-cases">
				<view class="case-card" v-for="design in designs" :key="design.id" @click="handleDesignDetail(design)">
					<image class="case-image" :src="design.image" mode="aspectFill" />
					<view class="case-info">
						<text class="title">{{ design.title }}</text>
						<view class="tags">
							<text class="tag" v-for="tag in design.tags" :key="tag">#{{ tag }}</text>
						</view>
						<button class="use-btn">
							<text class="iconfont icon-template"></text>
							使用模板
						</button>
					</view>
				</view>
			</view>
		</view>

		
	</view>
</template>

<style lang="scss">
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
	position: relative;
}

.header {
	display: flex;
	align-items: center;
	padding: 24rpx;
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 100;

	.logo {
		width: 64rpx;
		height: 64rpx;
		margin-right: 16rpx;
	}

	.title {
		flex: 1;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.header-right {
		display: flex;
		gap: 16rpx;
	}

	.icon-btn {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		padding: 0;

		.iconfont {
			font-size: 48rpx;
			color: #333;
		}
	}
}

.content {
	padding-bottom: 120rpx;
}

.main-banner {
	position: relative;
	margin: 0 24rpx;
	border-radius: 24rpx;
	overflow: hidden;
	
	.banner-swiper {
		height: 480rpx;
	}

	.banner-content {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 50%;
			background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
		}
	}

	.banner-info {
		position: absolute;
		left: 40rpx;
		bottom: 40rpx;
		right: 40rpx;
		z-index: 2;

		.tag {
			display: inline-block;
			padding: 8rpx 24rpx;
			background: #07C160;
			color: #fff;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-bottom: 16rpx;
		}

		.title {
			display: block;
			font-size: 48rpx;
			font-weight: 600;
			color: #fff;
			margin-bottom: 16rpx;
		}

		.desc {
			display: block;
			font-size: 28rpx;
			color: rgba(255,255,255,0.9);
			margin-bottom: 32rpx;
		}

		.action-btn {
			display: inline-flex;
			align-items: center;
			padding: 20rpx 40rpx;
			background: #07C160;
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			border: none;

			.iconfont {
				margin-right: 12rpx;
				font-size: 36rpx;
			}
		}
	}

	.swiper-dots {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		display: flex;
		gap: 12rpx;

		.dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: rgba(255,255,255,0.4);
			transition: all 0.3s;

			&.active {
				width: 32rpx;
				border-radius: 8rpx;
				background: #fff;
			}
		}
	}
}

.features {
	padding: 24rpx;

	.feature-main {
		background: #f8f9fa;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		min-height: 280rpx;

		.feature-content {
			flex: 1;
			padding: 40rpx;
			position: relative;
			z-index: 2;

			.tag {
				display: inline-flex;
				align-items: center;
				height: 44rpx;
				padding: 0 20rpx;
				background: linear-gradient(45deg, #ff4d4f, #ff7875);
				color: #fff;
				font-size: 24rpx;
				border-radius: 22rpx;
				margin-bottom: 24rpx;
			}

			.title {
				font-size: 40rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 16rpx;
				letter-spacing: 2rpx;
			}

			.subtitle {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 32rpx;
				letter-spacing: 1rpx;
			}

			.feature-btn {
				display: inline-flex;
				align-items: center;
				height: 72rpx;
				padding: 0 40rpx;
				background: linear-gradient(45deg, #07C160, #10b864);
				color: #fff;
				font-size: 30rpx;
				border-radius: 36rpx;
				border: none;
				box-shadow: 0 4rpx 12rpx rgba(7,193,96,0.2);
				transition: all 0.3s ease;
				letter-spacing: 1rpx;

				.iconfont {
					margin-right: 12rpx;
					font-size: 36rpx;
				}

				&:active {
					transform: translateY(2rpx);
					background: linear-gradient(45deg, #06ae56, #0fa55a);
				}
			}
		}

		.feature-image {
			width: 320rpx;
			height: 320rpx;
			position: relative;
			z-index: 1;
			margin-right: -40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
				object-fit: contain;
				transform: scale(1.1);
				transition: transform 0.3s ease;
				image-rendering: -webkit-optimize-contrast;
			}
		}

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, 
				rgba(248,249,250,1) 0%,
				rgba(248,249,250,0.95) 60%,
				rgba(248,249,250,0.4) 100%);
			z-index: 1;
		}
	}

	.feature-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-top: 32rpx;

		.feature-item {
			background: #f8f9fa;
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;
			height: 220rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg,
					rgba(255,255,255,0.9) 0%,
					rgba(248,249,250,0.95) 100%);
				z-index: 1;
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);

				&::before {
					opacity: 1;
				}

				.icon {
					transform: translateY(-4rpx) scale(1.05);
				}
			}

			.icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-bottom: 16rpx;
				transition: all 0.3s ease;
				position: relative;
				z-index: 2;
			}

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 4rpx;
				position: relative;
				z-index: 2;
			}

			.desc {
				font-size: 24rpx;
				color: #666;
				position: relative;
				z-index: 2;
				text-align: center;
			}

			// 为每个功能项添加不同的背景色调
			&:nth-child(1) {
				background: linear-gradient(135deg, #e6f3ff 0%, #f0f9ff 100%);
			}

			&:nth-child(2) {
				background: linear-gradient(135deg, #e6fffb 0%, #f0fffd 100%);
			}

			&:nth-child(3) {
				background: linear-gradient(135deg, #fff7e6 0%, #fffaf0 100%);
			}
		}
	}
}

.templates {
	padding: 32rpx 24rpx;

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.icon {
			font-size: 40rpx;
			color: #07C160;
			margin-right: 12rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.room-types {
		white-space: nowrap;
		overflow-x: auto;
		margin: 0 -24rpx;
		padding: 0 24rpx;

		&::-webkit-scrollbar {
			display: none;
		}

		.room-type {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin-right: 32rpx;

			.room-icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-bottom: 12rpx;
			}

			text {
				font-size: 26rpx;
				color: #666;
			}

			&.active {
				.room-icon {
					border: 2rpx solid #07C160;
				}

				text {
					color: #07C160;
					font-weight: 500;
				}
			}
		}
	}
}

.design-cases {
	padding: 0 24rpx;

	.case-card {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

		.case-image {
			width: 100%;
			height: 400rpx;
			object-fit: cover;
		}

		.case-info {
			padding: 24rpx;

			.title {
				display: block;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 16rpx;
			}

			.tags {
				margin-bottom: 24rpx;

				.tag {
					display: inline-block;
					margin-right: 16rpx;
					font-size: 24rpx;
					color: #07C160;
				}
			}

			.use-btn {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				background: #07C160;
				color: #fff;
				font-size: 28rpx;
				border-radius: 12rpx;
				border: none;

				.iconfont {
					margin-right: 8rpx;
					font-size: 32rpx;
				}
			}
		}
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #fff;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			font-size: 48rpx;
			margin-bottom: 4rpx;
		}

		&.active {
			color: #07C160;
		}
	}
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { listRoomTemplates } from '@/api/room'

// 轮播图数据
const swiperList = ref([
	{
		image: '/static/images/swiper/house.gif',
		tag: '新功能',
		title: '整屋设计',
		description: '一键生成3D效果图',
		buttonText: '去生成',
		action: 'whole-house'
	},
	{
		image: '/static/images/swiper/smart-furniture.gif',
		tag: '热门',
		title: '智能软装搭配',
		description: '专业设计师为您精选搭配方案',
		buttonText: '去搭配',
		action: 'furniture'
	},
	{
		image: '/static/images/swiper/ai-decoration.gif',
		tag: '推荐',
		title: 'AI装饰画定制',
		description: '让AI为您的空间创作独特艺术品',
		buttonText: '去创作',
		action: 'decoration'
	}
])

// 当前轮播图索引
const currentSwiper = ref(0)

// 当前选中的房间类型
const activeRoom = ref(null)

// 房间模板数据
const roomTemplates = ref([])

// 示例设计数据
const designs = ref([
	{
		id: 1,
		title: '温暖舒适的家居氛围',
		image: '/static/images/design/design1.jpg',
		tags: ['淡系奶油风', '简约']
	},
	{
		id: 2,
		title: '优雅精致的法式风格',
		image: '/static/images/design/design2.jpg',
		tags: ['法式风', '简约']
	}
])

onMounted(async () => {
	try {
		// 获取房间模板数据
		const response = await listRoomTemplates()
		if (response.code === 200 && response.data) {
			roomTemplates.value = response.data
			if (roomTemplates.value.length > 0) {
				activeRoom.value = roomTemplates.value[0].id
			}
		}
	} catch (error) {
		console.error('获取房间模板失败:', error)
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		})
	}
})

// 处理轮播图切换
const handleSwiperChange = (e) => {
	currentSwiper.value = e.detail.current
}

// 处理轮播图操作
const handleSwiperAction = (item) => {
	switch (item.action) {
		case 'whole-house':
			uni.navigateTo({ url: '/pages/design/house-design' })
			break
		case 'furniture':
			uni.navigateTo({ url: '/pages/design/furniture' })
			break
		case 'decoration':
			uni.navigateTo({ url: '/pages/design/decoration' })
			break
	}
}

// 处理整屋设计
const handleWholeHouseDesign = () => {
	uni.navigateTo({ url: '/pages/design/house-design' })
}

// 处理拍照设计
const handlePhotoDesign = () => {
	uni.navigateTo({ url: '/pages/design/photo' })
}

// 处理软装换搭
const handleFurnitureExchange = () => {
	uni.navigateTo({ url: '/pages/design/furniture' })
}

// 处理AI装饰画
const handleAIDecoration = () => {
	uni.navigateTo({ url: '/pages/design/decoration' })
}

// 设置当前房间类型
const setActiveRoom = (roomId) => {
	activeRoom.value = roomId
}

// 查看设计详情
const handleDesignDetail = (design) => {
	uni.navigateTo({ url: `/pages/design/detail?id=${design.id}` })
}
</script>
